<ng-container
  *ngIf="service.selectedProduct$ | async as product; else notFoundPage"
>
  <nav class="p-6">
    <div class="text-base breadcrumbs p-4 rounded-md bg-white shadow-md">
      <ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/products">Products</a></li>
        <li>{{ product.name }}</li>
      </ul>
    </div>
  </nav>

  <section class="flex m-6 justify-center">
    <div class="w-3/5 flex space-x-12">
      <div
        id="imgContainer"
        class="w-96 overflow-hidden bg-gray-200 rounded-lg shadow-md"
      >
        <img
          [src]="product.imgUrl"
          [alt]="product.name"
          class="h-full w-full object-cover object-center"
        />
      </div>
      <div class="flex flex-col w-full justify-between h-3/4">
        <div class="w-full flex justify-between text-2xl h-6">
          <span>{{ product.name }}</span>
          <span>{{ product.price | currency }}</span>
        </div>
        <div>{{ product.description }}</div>
      </div>
    </div>
  </section>

  <footer class="flex m-6 mt-28 justify-center">
    <div class="w-3/5 flex justify-between">
      <button
        *ngIf="product.id > 1"
        class="btn btn-primary"
        type="button"
        (click)="navToPreProduct()"
      >
        Previous
      </button>
      <div>
        <!-- Placeholder for styling -->
      </div>
      <button
        *ngIf="product.id < 4"
        class="btn btn-primary"
        type="button"
        (click)="navToNextProduct()"
      >
        Next
      </button>
    </div>
  </footer>
</ng-container>

<ng-template #notFoundPage>
  <nav class="p-6">
    <div class="text-base breadcrumbs p-4 rounded-md bg-white shadow-md">
      <ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/products">Products</a></li>
        <li><a routerLink="/products">Oops...</a></li>
      </ul>
    </div>
  </nav>

  <section class="flex m-6 justify-center">
    <div class="w-3/5 flex flex-col space-y-12">
      <p class="text-2xl">There's nothing here...</p>
      <button class="btn" (click)="navToProductsPage()">
        Back to product list
      </button>
    </div>
  </section>
</ng-template>
